<template>
  <div class="schoollist">
    <div class="school">
      <button @click="paiXu">按总人数排序</button>
      <button @click="xianS">显示总人数</button>
      <!-- 新增搜索输入框 -->
      <input
        v-model="shuRu"
        placeholder="输入学校名称搜索"
        style="margin-left: 10px; padding: 5px;"
      />
      <table align="center" border="1" cellpadding="0" cellspacing="0" borderColor="#d5d5d5" width="800">
        <thead>
          <tr>
            <th>学校</th>
            <th>本科</th>
            <th>硕士</th>
            <th>博士</th>
            <th>专任教师</th>
            <th>备注</th>
            <th v-if="rs">总人数</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(school) in chaXun" :key="school.school">
            <td>{{ school.school }}</td>
            <td>{{ school.UnderGraduate }}</td>
            <td>{{ school.Master }}</td>
            <td>{{ school.Dr }}</td>
            <td>{{ school.Teach }}</td>
            <td>{{ school.notes }}</td>
            <td v-if="rs">{{ school.total }}</td> <!-- 动态显示-->
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';

const arr = reactive([
  { school: '北京大学', UnderGraduate: 16628, Master: 16980, Dr: 14979, Teach: 3804, notes: '' },
  { school: '清华大学', UnderGraduate: 16291, Master: 22657, Dr: 21671, Teach: 3860, notes: '' },
  { school: '复旦大学', UnderGraduate: 15164, Master: 36690, Dr: 36690, Teach: 3602, notes: '' },
  { school: '上海交通大学', UnderGraduate: 18004, Master: 28439, Dr: 28439, Teach: 3887, notes: '学生数仅含全日制' },
  { school: '浙江大学', UnderGraduate: 29014, Master: 28058, Dr: 18436, Teach: 4605, notes: '' },
  { school: '中国科学技术大学', UnderGraduate: 8006, Master: 19792, Dr: 12213, Teach: 2264, notes: '' },
  { school: '南京大学', UnderGraduate: 15448, Master: 19066, Dr: 16269, Teach: 'N/A', notes: '' },
  { school: '哈尔滨工业大学', UnderGraduate: 31181, Master: 16296, Dr: 9224, Teach: 4120, notes: '' },
  { school: '西安交通大学', UnderGraduate: 24051, Master: 22587, Dr: 9337, Teach: 3772, notes: '' },
  { school: '中国科学院大学', UnderGraduate: 1662, Master: 32106, Dr: 31262, Teach: 3311, notes: '' },
  { school: '中国人民大学', UnderGraduate: 11678, Master: 11088, Dr: 5154, Teach: 1962, notes: '学生数仅含全日制' },
  { school: '同济大学', UnderGraduate: 18272, Master: 18798, Dr: 9566, Teach: 2797, notes: '《2024统计公报》提取' },
  { school: '华东师范大学', UnderGraduate: 115903, Master: 17153, Dr: 4114, Teach: 2358, notes: '学生数仅含全日制' },
  { school: '中山大学', UnderGraduate: 33329, Master: 24138, Dr: 10718, Teach: 4619, notes: '' },
  { school: '华南理工大学', UnderGraduate: 27757, Master: 18476, Dr: 5289, Teach: 2606, notes: '' },
  { school: '华中科技大学', UnderGraduate: 29742, Master: 23337, Dr: 11651, Teach: 3727, notes: '' },
  { school: '南开大学', UnderGraduate: 17305, Master: 11772, Dr: 5559, Teach: 2291, notes: '学生数仅含全日制' },
  { school: '天津大学', UnderGraduate: 18955, Master: 13707, Dr: 5822, Teach: 'N/A', notes: '学生数仅含全日制' },
  { school: '中南大学', UnderGraduate: 35385, Master: 16266, Dr: 8667, Teach: 'N/A', notes: '学生数仅含全日制' },
  { school: '湖南大学', UnderGraduate: 22699, Master: 11110, Dr: 5409, Teach: 'N/A', notes: '学生数仅含全日制' },
  { school: '东南大学', UnderGraduate: 16931, Master: 23289, Dr: 23289, Teach: 3371, notes: 'N/A' },
  { school: '北京航空航天大学', UnderGraduate: 16522, Master: 23985, Dr: 23985, Teach: 3055, notes: '' },
  { school: '北京理工大学', UnderGraduate: 15212, Master: 12920, Dr: 7426, Teach: 2688, notes: '学生数仅含全日制' },
  { school: '北京师范大学', UnderGraduate: 16628, Master: 16980, Dr: 14979, Teach: 3804, notes: '' },
]);

//设置默认值，响应式
let px = ref(false);
let rs = ref(false);
let shuRu = ref(''); 

// 计算排序后的学校列表
const Sc = computed(() => {
  const schools = arr.map(s => {
    const total = (s.UnderGraduate || 0) + (s.Master || 0) + (s.Dr || 0);
    return { ...s, total }; //总和
  });

  //排
  if (px.value) {
    return schools.sort((a, b) => b.total - a.total);
  }
  return schools;
});
// 过滤没关键词学校的列表
const chaXun = computed(() => {
  return Sc.value.filter(school =>
    school.school.includes(shuRu.value)
  );
});


const paiXu = () => {
  px.value = !px.value;
};

const xianS = () => {
  rs.value = !rs.value;
};
</script>

<style scoped>
.schoollist{
  margin-left: 20px;
  text-align: center;
}
button {
  margin-bottom: 10px;
  padding: 5px 10px;
  cursor: pointer;
  margin-right: 10px;
}
</style>